<template>
  <div class="choose-type" :changeFlight="changeFlight">
    <!-- 选择的title -->
    <div class="title" @click="changType">
      <p class="item left-title" :class="isGet?'act':''" id="1">{{this.get}}</p>
      <p class="item right-title" :class="!isGet?'act':''" id="2">{{this.post}}</p>
    </div>
    <!-- 输入框列表 - 接机 -->
    <div class="list-box" v-if="this.pickType == 1">
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/icon_feiji@3x.png" alt="">
        </div>
        <input class="input" v-model="number" @focus="changeFlightInfo" placeholder="请输入航班信息">
      </div>
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/icon_shizhong@3x.png" alt="">
        </div>
        <input class="input"  readOnly="readOnly" v-model="time" @focus="changTimeInfo"  placeholder="请选择上车时间">
      </div>
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/dot_hongse@3x.png" alt="">
        </div>
        <input class="input colorOn" v-model="location" @click="whereUps('ups')" placeholder="您在哪里上车"  readOnly="readOnly">
      </div>
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/dot_heise@3x.png" alt="">
        </div>
        <input class="input" v-model="where" placeholder="您在哪里下车" @click="whereUps('downs')" readOnly="readOnly">
      </div>
    </div>
    <!-- 输入框列表  - 送机 -->
    <div class="list-box" v-if="this.pickType == 2">
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/icon_shizhong@3x.png" alt="">
        </div>
        <input class="input"  readOnly="readOnly" v-model="time" @focus="changTimeInfo"  placeholder="请选择出发时间">
      </div>
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/dot_hongse@3x.png" alt="">
        </div>
        <input class="input colorOn" v-model="location" placeholder="您在哪里上车" @click="whereUps('ups')" readOnly="readOnly">
      </div>
      <div class="list">
        <div class="icon">
          <img src="../../../static/img/dot_heise@3x.png" alt="">
        </div>
        <input class="input" v-model="where" placeholder="您在哪里下车" @click="whereUps('downs')" readOnly="readOnly">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">

// 引入这个页面需要的方法库
import {mapMutations, mapGetters} from 'vuex'
export default {
  data () {
    return {
      isGet: true,
      get: '接机',
      post: '送机',
      number: '',
      time: '',
      location: '',
      where: ''
    }
  },
  computed: {
    changeFlight () {
      if (this.showFlightInfo === false) {
        this.number = this.flightInfo
        this.time = this.timeInfo
        this.location = this.searchBoxInfo
        this.where = this.destination
      }
    },
    ...mapGetters([
      'showFlightInfo',
      'flightInfo',
      'timeInfo',
      'searchBoxInfo',
      'destination',
      'showEnd',
      'pickType'
    ])
  },
  mounted () {
  },
  methods: {
    whereUps (el) {
      this.setAutocompleteList('')
      localStorage.setItem('parmastype', el)
      this.$router.push({name: 'whereUps', params: {types: el} })
    },
    // 选择航班的输入框获得焦点的时候
    changeFlightInfo () {
      this.setShowFlightInfo(true)
    },
    // 选择时间输入框获得焦点的时候
    changTimeInfo () {
      this.setShowTimeInfo(true)
    },
    // 选择地点的输入框获得焦点的时候
    changWhere () {
      this.$emit('getPreinput')
      this.setShowSearchBox(true)
    },
    // 选择下车地点的输入框获得焦点的时候
    changeEnd () {
      this.setShowEnd(true)
    },
    // 底部切换类型的方法
    changType (e) {
      this.setOrderName('')
      this.setOrderPhone('')
      switch (e.target.id) {
        case '1':
          this.isGet = true
          this.setPickType(1)
          localStorage.setItem('pickType', 1)
          this.setSearchBoxInfo('天河国际机场')
          localStorage.setItem('lat1','30.770054')
          localStorage.setItem('lng1','114.2142298')
          this.setDestination('')
          localStorage.setItem('lat2','')
          localStorage.setItem('lng2','')
          break
        case '2':
          this.isGet = false
          this.setPickType(2)
          localStorage.setItem('pickType', 2)
          this.setSearchBoxInfo('')
          localStorage.setItem('lat1','')
          localStorage.setItem('lng1','')
          this.setDestination('天河国际机场')
          localStorage.setItem('lat2','30.770054')
          localStorage.setItem('lng2','114.2142298')
          break
      }
    },
    ...mapMutations({
      setShowFlightInfo: 'SET_SHOWFLIGHTINFO',
      setShowTimeInfo: 'SET_SHOWTIMEINFO',
      setShowSearchBox: 'SET_SHOWSEARCHBOX',
      setShowEnd: 'SET_SHOWEND',
      setPickType: 'SET_PICKTYPE',
      setDestination: 'SET_DESTINATION',
      setOrderName: 'SET_ORDERNAME',
      setOrderPhone: 'SET_ORDERPHONE',
      setSearchBoxInfo: 'SET_SEARCHBOXINFO',
      setAutocompleteList: 'SET_AUTOCOMPLETELIST'
    })
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
  .choose-type
    position: fixed
    bottom: 0
    left: 50%
    margin-left: -177px
    width: 355px
    height: auto
    background-color: #fff
    border-radius: 4px
    .title
      display: flex
      width: 100%
      height: 40px
      border-bottom: .5px solid rgba(153, 153, 153, .5)
      .act
        background:#e2e2e2
      .item
        width: 50%
        height: 100%
        font-size: 13px
        color: rgb(51, 51, 51)
        line-height: 40px
        border-right: .5px solid rgba(153, 153, 153, .5)
        &:last-child
          border: none
    .list-box
      width: 315px
      height: auto
      bottom  0
      margin: 0 auto
      .list
        position: relative
        width: 100%
        height: 40px
        box-sizing: border-box
        border-bottom: .5px solid rgba(153, 153, 153, .5)
        .icon
          position: absolute
          top: 50%
          margin-top: -5px
          width: 10px
          height: 10px
          img 
            width 100%
        .input
          position: absolute
          top: 50%
          left: 20px
          margin-top: -10px
          width: 280px
          height: 20px
          font-size: 12px
          line-height: 20px
          color: rgb(153, 153, 153)
          outline none
        .colorOn
          color: rgb(51, 51, 51)
          backround: #fff
</style>